import React from "react"
import {
  FaAdjust,
  FaBars,
  FaFeatherAlt,
  FaFont,
  FaList,
  FaRobot,
  FaTh,
} from "react-icons/fa"
import IconComponent from "./IconComponent"

// 定义图标数据结构
interface IconData {
  icon: React.ReactElement
  onClick: () => void
}

// 图标数据数组
const iconDataArray: IconData[] = [
  {
    icon: <FaBars />,
    onClick: () => console.log("点击了菜单图标"),
  },
  {
    icon: <FaRobot />,
    onClick: () => console.log("点击了 AI 图标"),
  },
  {
    icon: <FaFeatherAlt />,
    onClick: () => console.log("点击了羽毛图标"),
  },
  {
    icon: <FaTh />,
    onClick: () => console.log("点击了网格图标"),
  },
  {
    icon: <FaList />,
    onClick: () => console.log("点击了列表图标"),
  },
  {
    icon: <FaFont />,
    onClick: () => console.log("点击了文本图标"),
  },
  {
    icon: <FaAdjust />,
    onClick: () => console.log("点击了曲线图标"),
  },
]

const IconList: React.FC = () => {
  return (
    <div className="fixed right-28 top-1/2 -translate-y-1/2 flex-col gap-6 hidden sm:flex">
      {iconDataArray.map((iconData, index) => (
        <IconComponent
          key={index}
          icon={iconData.icon}
          onClick={iconData.onClick}
        />
      ))}
    </div>
  )
}

export default IconList
